<script lang="ts">
import moment from 'moment'
import Vue from 'vue'

import { Component, Prop } from "vue-property-decorator"

@Component({})
export default class ProfileList extends Vue {
    @Prop() data: Profile[] = []

    get profiles(): Profile[] {
        return this.data
    }

    isToday(date: string): boolean {
        return moment(date).isSameOrBefore(moment())
    }

    go(id: string): void {

    }
}

</script>
<template>
    <view>
        <view class="profiles">
            <view v-for="(profile,index) in profiles" :key="index" class="profile">
                <view class="allRow" @click="go(profile.id)">
                    <view class="rowLeft">
                        <view class="avatar" :class="profile.gender">{{ profile.name.slice(0, 1) }}</view>
                    </view>
                    <view class="rowMiddle">
                        <view class="firstRow">
                            <text>{{ profile.name }}</text>
                            <!-- <text>学历：{{ profile.education && profile.education.diploma }}</text> -->
                        </view>
                        <view class="secondRow">
                            <text>{{ profile.age }}岁</text>
                        </view>
                    </view>
                    <view class="rowRight">
                        <view
                            class="availability"
                            :class="{ green: isToday(profile.availability.availableDate), yellow: !isToday(profile.availability.availableDate) }"
                        >可入场</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped>
ul.profiles {
    list-style: none;
    margin: 0;
    padding: 0;
}
.profile {
    margin: 5px;
    padding: 20px;
    border-bottom: 1px solid lightgray;
}
.avatar {
    width: 50px;
    height: 50px;
    background-color: gray;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    color: white;
}
.rowMiddle {
    width: 140px;
}
.rowMiddle span {
    margin: 20px;
}
.allRow {
    display: flex;
    flex-direction: row;
}
.rowLeft {
    width: 60px;
}

.rowRight {
    flex: 1;
    text-align: right;
}
.firstRow {
    font-size: 20px;
    font-weight: 20px;
}
.secondRow {
    color: #828282;
}
.M {
    background-color: #4882f1;
}
.F {
    background-color: #ed60b4;
}

.availability {
    padding: 4px 8px;
    font-size: 11px;
    display: inline-block;
    border-radius: 6px;
}
.green {
    background-color: #15be47;
    border: solid 2px #15be47;
    color: white;
}
.yellow {
    border: solid 1px #fd9904;
    background-color: white;
    color: #fd9904;
}
</style>